<template>
  <div>
    <a-select :getPopupContainer="(triggerNode:any) => triggerNode.parentNode" v-model:value="bindValue" :filterOption="false" :not-found-content="null" allowClear show-search showArrow
      style="width: 100%" :placeholder="placeholderName" @search="search" :options="options" :fieldNames="fieldNames"
      @change="change" :blur="blur" :focus="focus" :disabled="disabled">
      <template v-if="fetching" #notFoundContent>
        <a-spin size="small" />
      </template>
    </a-select>
  </div>

</template>

<script lang='ts' setup>

const props: any = defineProps({
  bindValue: [String, Number, Object, Array],
  options: [Array],
  fieldNames: {
    type: [Object, Array],
  },
  mode: {
    type: [String],
    default: 'default'
  },
  placeholderName: { type: [String], default: '' },
  fetching: [Boolean],
  disabled: [Boolean]
})
const state = reactive({
  options: props.options
})
const emits = defineEmits(['search', 'change', 'blur', 'focus'])
const search = (v: any) => {
  emits('search', v)
}
const change = (v: any) => {
  emits('change', v)
}
const blur = (v: any) => {
  emits('blur', v)
}
const focus = () => {
  emits('focus')
}
const filterOption = (inputValue: any, option: any) => {
  // console.log('filterOption=====>', inputValue, option);
  return false
}
</script>
<style lang='scss' scoped></style>